<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../event.drag/jquery.event.drag.js" type="text/javascript"></script>
<title>jquery.event.drag</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css" media="screen">
html, body {
	height: 95%;
	}
.point {
	position: absolute;
	height: 4px;
	width: 4px;
	top: 0;
	left: 0;
	background: #B00;
	}

</style>

<script type="text/javascript">
jQuery(function($){
	$( document.body ).bind("drag", $('#draw'), function( event ){
		$('<div class="point" />')
			.css({
				top: event.pageY - 2,
				left: event.pageX - 2
				})
			.appendTo( event.data );
		});
	});
</script>

<h2>event.drag / draw</h2>
<p>Mousedown and move around to draw on the page.</p>
<div id="draw"></div>
</body></html>  